"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2018/1/8
 */
import * as React from 'react'
import {commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import Colors from "../../assets/styles/Colors";
import MyWebView from "../../component/MyWebView";
import {WebPage} from "../../interface/router";
import {NAVBAR_HEIFHT, patchPostMessageJsCode} from "../../constant";
import NavRightButton from "../../component/RightButton";
import T from "../../utils/T";
import {openUrl} from "../../utils/tools";
import MyText from "../../component/MyText";
import Validator from "../../utils/Validator";

const {Actions} = require("react-native-router-flux");

const {View, WebView} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {ActionSheet} = require('antd-mobile');

class Page extends React.Component<WebPage, any> {

    web: any;
    state = {
        title: '加载中...',
        canGoBack: false,
        canGoForward: false,
        jsEvaluationValue: '',
        loading: false,
        url: ''
    };


    componentWillMount(): void {
        // console.log('将要打开:', this.props.source);
    }

    onBack = () => {
        // console.log('onBack', this.web);
        if (this.state.canGoBack) {
            this.web.goBack();
        } else {
            Actions.pop();
        }

    };

    onLoadEnd = ({nativeEvent}) => {
        this.setState({...nativeEvent});
        // console.log('load end', this.web);
    };

    onNavigationStateChange = (nativeEvent) => {
        this.setState({...nativeEvent});
        // console.log('onNavigationStateChange', nativeEvent);
    };

    onMorePress = () => {
        ActionSheet.showActionSheetWithOptions({
                options: [T('refresh'), T('open in Safari'), T('cancel'),],
                cancelButtonIndex: 2,
                destructiveButtonIndex: 1,
                maskClosable: true,
            },
            (buttonIndex) => {
                if (buttonIndex === 0) {
                    this.web.reload();
                }
                if (buttonIndex === 1) {
                    if (this.state.url) {
                        openUrl(this.state.url, false);
                    } else {
                        // console.log('无法打开', this.state.url);
                    }
                }
            });
    };

    onMessage = (e) => {
        // console.log('onMessage', e);
    };
    onShouldStartLoadWithRequest = (e) => {
        // console.log('onShouldStartLoadWithRequest', e.url);
        if (e.url.indexOf('http') !== -1) {
            return true;
        } else {
            openUrl(e.url);
            return false;
        }
        // if (Validator.validator(e.url, Validator.urlReg)) {
        //     console.log(1);
        //     return true;
        // }else {
        //     console.log(2);
        //
        // }
    };

    getSource = () => {
        let source = null;
        if (typeof this.props.source === 'string') {
            source = {uri: this.props.source}
        } else {
            source = this.props.source;
        }
        console.log('source= ', source);
        return source;
    };

    render() {
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               rightButton={<NavRightButton onPress={this.onMorePress}>
                                   更多
                               </NavRightButton>}
                               leftButton={<NavBackButton onPress={this.onBack}/>}
                               title={<View style={[commonStyles.centerVH, commonStyles.flex1, {height: NAVBAR_HEIFHT-12,paddingRight:5}]}><MyText
                                   numberOfLines={1} color={Colors.White}
                                   fontSize={16}>{this.state.title}</MyText></View>}
                />
                <WebView style={[{display: 'flex', flex: 1}]}
                         injectedJavaScript={patchPostMessageJsCode}
                         javaScriptEnabled
                         domStorageEnabled
                         onNavigationStateChange={this.onNavigationStateChange}
                         onMessage={this.onMessage}
                         onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
                         onLoadEnd={this.onLoadEnd.bind(this)}
                         ref={web => this.web = web}
                         source={this.getSource()}
                />
            </View>
        );
    }
}


export default Page;